<!--
 * @Author: your name
 * @Date: 2021-12-16 09:19:55
 * @LastEditTime: 2021-12-16 10:32:24
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \day8vue3\my-app\src\components\Setup.vue
-->
/<template>
  <div>
    {{count}}
    <button @click="changeCount">改变</button>
  </div>
</template>

<script>
// 引入ref
import {ref} from "vue"
export default {
  props:{
    // 接受参数
    msg:{
      type:String
    }
  },
  // 函数   没有this  两个参数 props  ctx
  setup(props,ctx){
    console.log(props);
    console.log(ctx);//上下文  可以解构出来 {attrs,emit,slots}
   
    // 通过ref 把参数变成响应式的  会变成对象 接受一个内部值并返回一个响应式且可变的 ref 对象
    let count=ref(100);
     // 回调函数
    const changeCount=()=>{
        // 通过ref 后会变成对象  取value值
        count.value++
    }
    // 参数和方法必须得 return 回去
    return {
      count,
      changeCount
    }
  }
}
</script>

<style>

</style>